<template>
  <common-echarts :option="option" ref="echarts" :width="1000" :height="600"></common-echarts>
</template>

<script>
import CommonEcharts from "@/components/echarts/echarts.vue";

export default {
  name: "Dashboard1Echarts",
  components: {
    CommonEcharts,
  },
  computed: {
    option() {
      let series = [
        {
          name: "条形图",
          type: "bar",
          label: {
            normal: {
                show: true,
                position: "right"
            }
          },
          data: [
            4320, 3529, 3105, 2304, 2094, 
            1790, 1565, 1120, 780, 409
          ]
        },
        {
            type: 'pie',
            center: ['20%', '45%'], // 位置
            radius: ['15%', '20%'], // 内径与外径
            label: {
                normal: {
                    formatter: '{b}:\n{c}({d}%)'
                }
            },
            data: [
                {value: 1032, name: 'Mac'},
                {value: 10096, name: 'iphone'},
                {value: 1240, name: 'iPad'},
                {value: 15098, name: 'Android'},
                {value: 4098, name: 'Windows'},
                {value: 2656, name: '其他'}
            ]
        },
        {
            type: 'pie',
            center: ['50%', '45%'],
            radius: ['15%', '20%'],
            // label: {},
            data: [
                {value: 11045, name: '小于25岁'},
                {value: 20230, name: '25岁-40岁'},
                {value: 2945, name: '大于40岁'}
            ]
        },
        {
            type: 'pie',
            center: ['80%', '45%'],
            radius: ['15%', '20%'],
            // label: {},
            data: [
                {value: 1851, name: "天猫"},
                {value: 10234, name: "淘宝"},
                {value: 14575, name: "京东"},
                {value: 7560, name: "拼多多"}
            ]
        },
        {
            xAxisIndex: 1,
            yAxisIndex: 1,
            type: "line", // 折线图
            data: [
                416,382,318,184,215,265,
                1426,1383,1328,1284,1225,1225,
                2436,2384,2338,2384,2235,2235,
                3436,3384,3338,3384,3235,3235
            ],
            // smooth: true, 
            markPoint: {
                data: [
                    {type: "max", name: "最大值", symbolSize: 60},
                    {type: "min", name: "最小值", symbolSize: 60},
                ],
                itemStyle: {
                    normal: {color: "#f36100"}
                }
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
      ];

      return {
        title: [
          {
            text: "今日订单总金额",
            x: "center",
            y: "4.5%",
            textStyle: { fontSize: 20, color: "#f00" },
          },
          {
            text: "4509834",
            x: "center",
            y: "9%",
          },

          {
            text: "今日成交订单数",
            x: "14.7%",
            y: "15%",
            textStyle: { fontSize: 20 },
          },
          {
            text: "34220",
            x: "15.3%",
            y: "20%",
            textStyle: { fontSize: 30 },
          },

          {
            text: "订单成功占比",
            x: "center",
            y: "15%",
            textStyle: { fontSize: 20 },
          },
          {
            text: "93.25%",
            x: "center",
            y: "20%",
            textStyle: { fontSize: 30 },
          },

          {
            text: "今日取消订单数",
            x: "74.5%",
            y: "15%",
            textStyle: { fontSize: 20 },
          },
          {
            text: "2310",
            x: "76%",
            y: "20%",
            textStyle: { fontSize: 30 },
          },

          {
            text: "购买用户\n\n设备分布",
            x: "19.8%",
            y: "45%",
            textAlign: "center",
            textBaseline: "middle",
            textStyle: { fontSize: 20 },
          },
          {
            text: "购买用户\n\n渠道分布",
            x: "79.8%",
            y: "45%",
            textAlign: "center",
            textBaseline: "middle",
            textStyle: { fontSize: 20 },
          },
          {
            text: "购买用户\n\n年龄分布",
            x: "49.8%",
            y: "45%",
            textAlign: "center",
            textBaseline: "middle",
            textStyle: { fontSize: 20 },
          },
          
          {
            text: "订单量TOP10城市",
            x: "18%",
            y: "60%",
          },
          {
            text: "订单量分时段统计",
            x: "65%",
            y: "60%",
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" },
        },
        // 背景色
        backgroundColor: "rgba(20,20,100,1)",
        // 坐标位置
        grid: [
          { left: "5%", right: "55%", top: "65%", bottom: "5%", containLabel: true },
          {
            gridIndex: 1,
            left: "55%",
            right: "5%",
            top: "65%",
            bottom: "5%",
            containLabel: true,
          },
        ],
        xAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value}件",
            },
            boundaryGap: [0, 0.02],
          },
          {
            gridIndex: 1, // x 轴所在的 grid 的索引，默认位于第一个 grid
            type: "category",
            boundaryGap: false,
            data: [
                '0时','1时','2时','3时', '4时','5时',
                '6时','7时','8时','9时', '10时','11时',
                '12时','13时','14时','15时', '16时','17时',
                '18时','19时','20时','21时', '22时','23时'
            ]
          },
        ],
        yAxis: [
            {
                type: 'category',
                data: [
                    '城市A', '城市B', '城市C', '城市D', '城市E',
                    '城市F', '城市G', '城市H', '城市I', '城市J'
                ],
                axisLabel: {interval: 0},
            },
            {
                gridIndex: 1,
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: series,
      };
    },
  },
  data() {
    return {};
  },
  methods: {
    refresh() {
      console.log("option:", this.option);
      this.$nextTick(this.$refs.echarts.refresh);
    },
  },
};
</script>
